<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true" >
      <el-form-item label="用户名">
        <el-input v-model="form.usernamername" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="toAdd">添加</el-button>
      </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="append">更加数据</el-button>
      </el-form-item>
    </el-form>
  <div>
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="realname" label="姓名" width="180" />
          <el-table-column prop="username" label="用户名" width="180" />
          <el-table-column prop="registleid" label="挂号级别" />
            <el-table-column  label="操作" >
              <template #default="solt">
                <el-button link type="primary" size="small"   @click="toEdit(solt)">编辑：{{ solt.row.id }}  </el-button>
                <el-button link type="primary" size="small" @click="removeById(solt.row.id)">删除</el-button>
              </template>
            </el-table-column>
      </el-table>
  </div>
    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
    <el-dialog v-model="editDialogFormVisible" title="用户编辑" width="500">
      <el-form :model="editForm" label-width="auto"  >
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <el-form-item label="真实名">
          <el-input v-model="editForm.realname" />
        </el-form-item>
          <el-form-item >
                <el-button type="primary"  @click="save" >保存</el-button>
        </el-form-item>
      </el-form>
  
  
    </el-dialog>
  </template>
  
  
  <script setup>
  import {ref,onMounted,onUnmounted} from 'vue'
  import { ElNotification } from 'element-plus'
  import service from '@/utils/request'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  //是否显示 dialog
  let editDialogFormVisible = ref(false);
  
  //用于接收表单内容的
  let form =ref( {
      username:'',
      gender:1
  })
  // 修改表单
  let editForm = ref({
   id:'',
   username:'',
   password:'',
   realname:''
  })

  let  provinceList = ref([
  
      { label:'黑龙江',value:'HLJ'  }, 
      { label:'辽宁',value:'LJ'  },
      { label:'吉林',value:'JL'  },
      { label:'江西',value:'JX'  },
      { label:'山西',value:'SX'  },
  
  ])

  //提交数据 到 
  function onSubmit(){
      console.log("form",form.value);
      
  }
  
  //表格的数据
  let tableData = ref([])
  // 模拟数据的变更
  function append(){
      console.log("tableData.value",tableData.value);
       tableData.value.push({
            username: 'appendUser',
              name: 'Tom',
              address: 'No. 189, Grove St, Los Angeles',
       })
  }
  function toAdd(){
    editForm.value={
      username:'',
      password:'',
      realname:''
    }
    editDialogFormVisible.value = true;
  }
  function save(){
    //1 获取添加的表单信息
    console.log("editForm.value: ",editForm.value);
    //2 发送网络请求 到后端，
    service.post("/user/saveOrUpdate",editForm.value).then(({status,data}) => {
      console.log("status: ",status);
      console.log("data: ",data);
      editDialogFormVisible.value = false;
      editForm.value={
      username:'',
      password:'',
      realname:''
      }
      if(data){
        ElNotification({
        title: '提示',
        message: '保存成功!!!!!!!!!!!!!',
        type: 'success',
         })
        listData();
      }else{
        ElNotification({
        title: '提示',
        message: '保存失败!!!!!!!!!!!!!',
        type: 'warning',
        })
      }
    })
  }
  //待编辑
  function toEdit({row}){
    const id = row.id
    service.get('/user/getById/'+id).then(({status ,data})=>{
      //根据用户id ，查询当前待修改的数据  
      editForm.value.id =  data.id
      editForm.value.username =  data.username
      editForm.value.password =  data.password
      editForm.value.realname =  data.realname
      editDialogFormVisible.value = true;
    })
  }

  function removeById(id){
    //确认是否删除
    ElMessageBox.confirm(  '是否确认删除?',  'Warning',   {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
    .then(() => {
      service.get('/user/deleteById/'+id).then(({status ,data})=>{
            if(data){
              // 给与用户反馈
              ElNotification({
                title: '提示',
                message: '删除成功!!!!!!!!!!!!!',
                type: 'success',
              })
              //查询最新的数据
              listData();
            }else{
                // 给与用户反馈
                ElNotification({
                  title: '提示',
                  message: '删除失败',
                  type: 'error',
                })
            }
      })
    })  
}
  function listData(){
   console.log("简单封装了 service， 组件挂在成功",service)
    service.get('/user/list').then(({status,data}) =>{
        tableData.value = data
    })
  }

  onMounted(()=>{
    listData();
  })
  
  // onUnmounted(()=>{
  //   console.log("组件销毁了")
  // })
  </script>